<template>
  <header>
    <span @click="$back"><van-icon name="arrow-left" color="#fff" size="18" /></span>
    <strong>{{ $t("language.vip.name") }}</strong>
    <span @click="$openPage('/kefu')"><img src="@/assets/img/kefu.png" alt="" /></span>
  </header>
  <main>

    <template v-if="vip.vipinfo.currentRank > 0">
      <div class="process">
        <div class="left">
          <img class="bg" src="@/assets/img/vipbg.png" alt="">
          <img class="icon" src="@/assets/img/vipicon.png" alt="">
          <span>VIP{{ iconindex }}</span>
        </div>

        <div class="right">
          <van-progress :percentage="percentage(vip.vipinfo.currentVipRecharge,vip['vips'][iconindex]['highest'])"
            :pivot-text="vip.vipinfo.currentVipRecharge/100 + '/' + vip['vips'][iconindex]['highest']/100"
            track-color="#fff" stroke-width="15" pivot-color="#000" />
          <span>VIP{{iconindex+1>=vip.vips.length?iconindex:iconindex+1 }}</span>
        </div>
      </div>
      <div class="module1" style="margin: 10px 0 0 0;">
        <h2>{{ $t("language.vip.module2") }}</h2>
        <p>1.{{ $t("language.vip.text1") }}R${{ $dot(vip['vips'][iconindex]["highest"])
          }}</p>
        <!-- <p>2.{{ $t("language.vip.text2") }}</p> -->
      </div>
    </template>
    <!-- <div class="warn" @click="openwarn">
      <el-icon>
        <QuestionFilled color="#b5bac8" />
      </el-icon>
    </div> -->
    <div class="create">
      <h3 v-if="vip.vipinfo.currentRank == 0">{{ $t("language.vip.title") }}</h3>
      <van-button @click="$openPage('/rechange')">{{
      $t("language.vip.btnname")
    }}</van-button>
    </div>
    <h3>{{ $t("language.vip.viptitle") }}</h3>
    <template v-if="vip.vips.length != 0">
      <div class="imglist">
        <template v-for="(item, index) in vip.vips" :key="index">
          <div class="imgitem" @click="iconindex = index" :class="iconindex == index ? 'scale' : ''">
            <img src="@/assets/img/vip_01.png" alt="" />
            <span>V{{ index }}</span>
          </div>
        </template>
      </div>
      <dl>
        <dd>
          <img src="@/assets/img/vip_02.png" alt="" />
          <div>
            <span>{{ $t("language.vip.icon1") }}</span><strong>R${{ $dot(vip['vips'][iconindex]["upgradeBonus"])
              }}</strong>
          </div>
        </dd>
        <dd>
          <img src="@/assets/img/vip_03.png" alt="" />
          <div>
            <span>{{ $t("language.vip.icon2") }}</span><strong>{{ vip['vips'][iconindex]["todayTimesLimit"] }}</strong>
          </div>
        </dd>
        <dd>
          <img src="@/assets/img/vip_04.png" alt="" />
          <div>
            <span>{{ $t("language.vip.icon3") }}</span><strong>{{ vip['vips'][iconindex]["withdrawalRate"] }}%</strong>
          </div>
        </dd>
        <dd>
          <img src="@/assets/img/vip_05.png" alt="" />
          <div>
            <span>{{ $t("language.vip.icon4") }}</span><strong>R${{ $dot(vip['vips'][iconindex]["todayAmountLimit"])
              }}</strong>
          </div>
        </dd>
      </dl>
    </template>

    <div class="module1">
      <h2>{{ $t("language.vip.module2") }}</h2>
      <p>1.{{ $t("language.vip.text1") }}R${{ $dot(vip['vips'][iconindex]["highest"])
        }}</p>
      <!-- <p>2.{{ $t("language.vip.text2") }}</p> -->
    </div>
    <!-- <div class="module2">
      <h2>{{ $t("language.vip.module3") }}</h2>
      <p>{{ $t("language.vip.text3") }}</p>
    </div> -->
  </main>
  <warntip ref="warnt"></warntip>
</template>
<script setup lang="ts">
import {
  ref,
  reactive,
  getCurrentInstance,
  onActivated,
} from "vue";
import warntip from "@/components/warn.vue";
const { proxy } = getCurrentInstance();
let info = JSON.parse(localStorage.getItem("info"));
//获取vip信息
let vip = reactive({
  vips: [{
    grade: 0,
    highest: 5000,
    lowest: 0,
    name: "VIP0",
    todayAmountLimit: 0,
    todayTimesLimit: 0,
    upgradeBonus: 0,
    withdrawalRate: 0,
  }],
  vipinfo: {
    currentRank: 0,
    currentVipRecharge: 0,
    id: 1688771,
    nextRank: 1,
    upgradeNeedRecharge: 5000,
  }
});
let percentage = (data1, data2) => {
  return Number(data1) / Number(data2) * 100 > 100 ? 100 : Number(data1) / Number(data2) * 100
}
let iconindex = ref(0);
onActivated(() => {
  proxy.$post(`/Basic/v1.0/User/VipWithdrawl`, { id: info.gameID }).then(({ data }) => {
    vip.vips = data.data.vips;
  });
  proxy.$post(`/UserCenter/v1.0/User/Vip`, { id: info.gameID }).then(({ data }) => {
    for (let key in data.data) {
      vip.vipinfo[key] = data.data[key]
    }
    iconindex.value = vip.vipinfo.currentRank
  });
});
let warnt = ref(null);
let openwarn = () => {
  console.log(warnt.value.open());

  warnt.value.open();
};

</script>
<style scoped lang="scss">
:deep(.van-progress) {
  border-radius: 7.5px !important;
  background-color: #5a5d64 !important;
}

:deep(.van-progress__portion) {
  background: rgb(0, 144, 109) !important;
  border-radius: 7.5px !important;
}

:deep(.van-progress__pivot) {
  background-color: transparent !important;
  left: 50%!important;
  transform: translate(-50%, -50%)!important;
}

header {
  width: 100%;
  height: 45px;
  z-index: 8;
  position: fixed;
  left: 0;
  top: 0;
  @include flex(row, space-between, center);
  background-color: rgb(36, 39, 43);
  padding: 0 20px;
  color: #fff;

  span {
    display: block;
    @include flex(row, center, center);

    img {
      height: 28px;
      width: 28px;
    }
  }
}

main {
  padding: 45px 12px 90px;
  width: 100vw;
  min-height: 100vh;
  background-color: #1a1a1a;

  .warn {
    @include flex(row, flex-end, center);
    padding-top: 10px;
  }

  .process {
    padding-top: 10px;
    width: 100%;
    @include flex(row, flex-start, center);

    .left {
      width: 58px;
      height: 58px;
      position: relative;
      @include flex(column, center, center);

      .bg {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        right: 0;
        z-index: 0;
      }

      .icon {
        width: 40px;
        position: static;
        z-index: 4;
      }

      span {
        width: 38px;
        position: static;
        z-index: 4;
        height: 14px;
        color: #fff;
        background-color: #0a906c;
        border-radius: 8px;
        @include flex(row, center, center);
        text-align: center;
        display: block;
        font-size: 12px;
      }

    }

    .right {
      flex: 1;
      margin-left: -20px;
      padding: 0 5px 0 25px;
      @include flex(row, flex-start, center);
      height: 40px;
      border-radius: 10px;
      background-color: #32353e;
      margin-right: 40px;
      :deep(.van-progress) {
        flex: 1;
       
      }

      span {
        color: #fff;
        font-size: 12px;
        padding-left: 5px;
      }

    }
  }

  .create {
    width: 100%;
    margin-top: 20px;

    h3 {
      font-size: 15px;
      color: #fff;
      text-align: center;
      padding-top: 10px;
      margin-bottom: 15px;
    }

    .van-button {
      background: #0a906c;
      display: block;
      color: #fff;
      outline: none;
      border: none;
      width: 155px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      border-radius: 5px;
      margin: 0 auto;
      font-size: 12px;
    }
  }

  >h3 {
    font-size: 18px;
    color: #fff;
    font-weight: normal;
    margin-top: 20px;
  }

  .imglist {
    width: 100%;
    overflow-x: auto;
    height: 60px;
    padding: 0 10px;
    margin: 10px 0 20px;

    &::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
    }

    @include flex(row, flex-start, center);
    flex-wrap: nowrap;

    .imgitem+.imgitem {
      margin-left: 30px;
    }

    .imgitem {
      position: relative;
      transition: all 0.4s;
      transform: scale(1);
      min-width: 50px;
      height: 45px;
      @include flex(row, center, center);

      img {
        width: 50px;
        height: 45px;
        opacity: 0.65;
        position: absolute;
        top: 0;
        left: 0;
      }

      span {
        font-size: 18px;
        text-align: center;
        color: #fff;
        position: static;
        z-index: 4;
      }
    }

    .scale {
      transform: scale(1.18);

      img {
        opacity: 1;
      }
    }
  }

  dl {
    @include flex(row, space-between, center);
    width: 100%;
    flex-wrap: wrap;
    margin-top: 10px;
    border-bottom: 1px solid #4a4c53;

    dd {
      width: 50%;
      margin-bottom: 30px;
      @include flex(row, flex-start, center);

      img {
        width: 38px;
        margin-right: 10px;
      }

      div {
        @include flex(column, center, flex-start);

        span {
          font-size: 12px;
          color: #fff;
          white-space: nowrap;
        }

        strong {
          font-size: 15px;
          color: #b5bac8;
          display: block;
          margin-top: 4px;
        }
      }
    }
  }

  .module1 {
    margin-top: 20px;

    h2 {
      font-size: 15px;
      color: #fff;
      font-weight: normal;
      margin-bottom: 4px;
    }

    p {
      font-size: 12px;
      color: #b5bac8;
      padding-left: 10px;
    }
  }

  .module2 {
    margin-top: 30px;
    padding-left: 10px;

    h2 {
      font-size: 15px;
      color: #fff;
      font-weight: normal;
      margin-bottom: 15px;
    }

    p {
      font-size: 12px;
      color: #b5bac8;
      line-height: 22px;
    }
  }
}
</style>
